<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlickGrid example 14: Highlighting and Flashing cells</title>
		<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
		<style>
        .load-medium {
            color: orange;
            font-weight: bold;
        }
        .load-hi {
            color: red;
            font-weight: bold;
        }
        .changed {
            background: pink;
        }
        .current-server {
            border: 1px solid black;
            background: orange;
        }
	    </style>
	</head>
	<body>


		<div style="width:520px;float:left;">
			<div id="myGrid" style="width:100%;height:500px;"></div>
		</div>

		<div class="options-panel" style="width:320px;margin-left:550px;">
            <h2>About</h2>
            This example simulates a real-time display of CPU utilization in a web farm.
            Data is updated in real-time, and cells with changed data are highlighted.
            You can also click "Find current server" to scroll the row displaying data for the current
            server into view and flash it.
            <h2>Demonstrates</h2>
            <ul>
                <li>setHighlightedCells()</li>
                <li>flashCell()</li>
            </ul>
            <h2>Controls</h2>
            <button onclick="simulateRealTimeUpdates()">Start simulation</button>
            <button onclick="findCurrentServer()">Find current server</button>
		</div>

		<script language="JavaScript" src="../lib/firebugx.js"></script>

		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>

		<script language="JavaScript" src="../slick.editors.js"></script>
		<script language="JavaScript" src="../slick.grid.js"></script>

		<script>
		var grid;
		var data = [];
		var columns = [{id:"server", name:"Server", field:"server", width:180}];
        var currentServer;

        function cpuUtilizationFormatter(row, cell, value, columnDef, dataContext) {
            if (value > 90) 
                return "<span class='load-hi'>" + value + "%</span>";
            else if (value > 70)
                return "<span class='load-medium'>" + value + "%</span>";
            else
                return value + "%";
        }

        for (var i=0; i<4; i++) {
            columns.push({
                id: "cpu" + i,
                name: "CPU" + i,
                field: i,
                width: 80,
                formatter: cpuUtilizationFormatter
            });
        }

		var options = {
			editable: false,
			enableAddRow: false,
			enableCellNavigation: true,
            cellHighlightCssClass: "changed",
            cellFlashingCssClass: "current-server"
		};



		$(function()
		{
			for (var i=0; i<500; i++) {
				var d = (data[i] = {});
                d.server = "Server " + i;
                for (var j=0; j<columns.length; j++) {
                    d[j] = Math.round(Math.random()*100);
                }
			}

			grid = new Slick.Grid($("#myGrid"), data, columns, options);

            currentServer = Math.round(Math.random()*(data.length-1));
		});


        function simulateRealTimeUpdates() {
            var changes = {};
            var numberOfUpdates = Math.round(Math.random()*(data.length/10));
            for (var i=0; i<numberOfUpdates; i++) {
                var server = Math.round(Math.random()*(data.length-1));
                var cpu = Math.round(Math.random()*(columns.length-1));
                var delta = Math.round(Math.random()*50)-25;

                var val = data[server]["cpu" + cpu] + delta;
                val = Math.max(0,val);
                val = Math.min(100,val);

                data[server]["cpu" + cpu] = val;

                if (!changes[server])
                    changes[server] = {};

                changes[server]["cpu" + cpu] = true;

                grid.removeRow(server);
            }

            grid.setHighlightedCells(changes);
            grid.render();

            setTimeout(simulateRealTimeUpdates, 500);
        }

        function findCurrentServer() {
            grid.scrollRowIntoView(currentServer);
            grid.flashCell(currentServer,grid.getColumnIndex("server"),100);
        }

		</script>

	</body>
</html>
